<template>
  <PageContainer>
    <view class="container pa-16">
      <Header title="精选答疑" />
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="params"
        @register="register"
        :is-show-loadmore="dataList.length > 1"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="bg-white pa-12 br-8 mb-12">
            <AnsweringQuestionsItem :data="v" />
          </view>
        </template>
      </Paglist>

      <TButtonGroup v-if="showSubmit" :show-background="true">
        <TButton
          class="gutter-btn"
          :icon="'\ue687'"
          custom-class="br-22"
          text="我要提问"
          type="primary"
          @click="modalVisible = true"
        />
      </TButtonGroup>
      <ShowModal
        v-model="modalVisible"
        title="向发布者提问"
        content-width="100%"
        cancel-text="取消"
        confirm-text="发送问题"
        confirm-color="#2878FF"
        :confirm-auto-close="false"
        @confirm="handleConfirm"
      >
        <template #content>
          <view class="pa-20" style="width: 100%">
            <view class="fz-14 mb-16" style="color: #969799">
              <text>请简要说明您要询问的问题</text>
            </view>
            <view style="background-color: #f2f3f5">
              <UniEasyinput v-model="questionsVal" type="textarea" placeholder="请输入" />
            </view>
          </view>
        </template>
      </ShowModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* answeringQuestionsList 精选答疑 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { onLoad } from '@/router';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref } from 'vue';
  import AnsweringQuestionsItem from '../components/AnsweringQuestionsItem/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { creatingQuestions, selectedAnswersList } from '@/api/businessOpportunities';
  import type { IAnsweringQuestionsResult } from '@/api/businessOpportunities/type';
  import { Toast } from '@/utils';

  const params = reactive({
    boInfoId: 0,
  });
  const showSubmit = ref<boolean>(false);
  onLoad<'answeringQuestionsList'>((op) => {
    params.boInfoId = op.id;
    showSubmit.value = op.showSubmit;
    refresh();
  });

  const dataList = ref<IAnsweringQuestionsResult[]>([]);

  provide('api', selectedAnswersList);
  const [register, { refresh }] = useConList();

  const modalVisible = ref(false);
  const questionsVal = ref('');
  const handleConfirm = () => {
    if (!questionsVal.value) return Toast('请输入');
    creatingQuestions({
      boInfoId: params.boInfoId!,
      content: questionsVal.value,
    }).then(() => {
      refresh();

      modalVisible.value = false;
      questionsVal.value = '';

      setTimeout(() => {
        uni.showModal({
          title: '问题提交成功！',
          content:
            '您的问题已成功发送给发布者！请耐心等待发布者回复。可前往【我的】-【我的供需】-【我提交的问题】查看问题回复情况。',
          confirmText: '我知道了',
          showCancel: false,
        });
      }, 300);
    });
  };
</script>
